<template>
  <div>
    <div class="closeWrapper">
        <span class="iconfont iconicon-test"></span>
    </div>
    <div class="logoWrapper">
        <span class="iconfont iconnew"></span>
    </div>
 
    <AuthInput 
        textPlaceholder="用户名/手机号码"
        type="text"
        :rule="ruleUsername"
        errMsg="请输入正确的手机号"
        @valChanged="setUsername"
    />
    <AuthInput 
        textPlaceholder="密码"
        type="password"
        :rule="rulePassword"
        errMsg="请输入三到九位的密码"
        @valChanged="setPassword"
    />


    <AuthBtn btnText="登录" @clicked="login"/>

    
  </div>
</template>

<script>
import AuthInput from '@/components/AuthInput'
import AuthBtn from '@/components/AuthBtn'

export default {
    data() {
        return {
            username: '',
            password: '',
            ruleUsername: '^\\d{5,11}$',
            rulePassword: '^.{3,9}$'
        }
    },
    components: {
        AuthInput,
        AuthBtn
    },
    methods: {
        login() {
            // 这里发送请求, 但是发送请求前, 需要先校验数据的正确性
            // 如果只校验是不是空的, 比较简单
            if (!this.username || !this.password) {
                this.$toast.fail('请输入完整信息')
                // 弹窗以后阻止继续操作, return
                return;
            }
            // 如果希望真的以正则的方式来校验
            // 将原来传进去子组件的正则变为一个 data 属性, 利用他们进行校验
            var regExpUsername = new RegExp(this.ruleUsername)
            if (!regExpUsername.test(this.username)) {
                this.$toast.fail('用户名格式错误')
                // 弹窗以后阻止继续操作, return
                return;
            }

            var regExpPassword = new RegExp(this.rulePassword);
            if (!regExpPassword.test(this.password)) {
                this.$toast.fail('密码格式错误')
                // 弹窗以后阻止继续操作, return
                return;
            }

            this.$axios({
                url: '/login',
                method: 'post',
                data: {
                    username: this.username,
                    password: this.password
                }
            }).then(res=>{
                // 数据都在 res.data 里面
                const {message,data} = res.data;
                // console.log(message);
                // console.log(data);
                if (message == "登录成功") {
                    // 这里登陆成功, 除了弹窗, 现在还需要记录 token 和用户 id
                    localStorage.setItem('token', data.token)
                    localStorage.setItem('userId', data.user.id)
                    this.$toast.success(message)
                    // 登录成功等一会跳转到个人中心
                    setTimeout(() => {
                        this.$router.replace('/personal')
                    }, 500);
                }else {
                    this.$toast.fail(message)
                }
                
            })
        },
        setUsername(username) {
            this.username = username
        },
        setPassword(password) {
            this.password = password
        }
    }
};
</script>

<style lang="less" scoped>
.closeWrapper {
    padding: 6.667vw 6.667vw 0;
    .iconicon-test {
        font-size: 7.5vw;
    }
}
.logoWrapper {
    text-align: center;
    .iconnew {
        font-size: 35vw;
        color: #d81e06;
    }
}


</style>